import React from "react";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "../../components/ui/card";
import {
  getProductData,
  getSalesData,
  getUserData,
} from "@/src/service/dashboard";
import { formatCurrency, formatNumber } from "@/src/lib/formatters";
import prisma from "@/src/db/db";

const DashboardCard = ({ title, description, body }) => {
  return (
    <Card>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
        <CardDescription>{description}</CardDescription>
      </CardHeader>
      <CardContent>
        <p>{body}</p>
      </CardContent>
    </Card>
  );
};

const Admin = async () => {
  const [salesData, userData, productData] = await Promise.all([
    getSalesData(),
    getUserData(),
    getProductData(),
  ]);

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      <DashboardCard
        title="Sales"
        description={`${formatNumber(salesData.numberOfSales)} Orders`}
        body={formatCurrency(salesData.amount)}
      />

      <DashboardCard
        title="Customer"
        description={`${formatCurrency(
          userData.avgValuePerUser
        )} Average Value`}
        body={formatNumber(userData.userCount)}
      />

      <DashboardCard
        title="Active Products"
        description={`${formatNumber(productData.activeCount)} Inactive`}
        body={formatNumber(productData.inActiveCount)}
      />
    </div>
  );
};

export default Admin;
